*{
	margin: 0;
	padding: 0;
	list-style: none;
}
html,body{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: -9;
	overflow: hidden;
}

.audio{
	/* width: 9.4%;
	height: 5.3%; */
	display: none;
	width: 40px;
	height: 40px;
	position:fixed;
	right: 3%;
	top: 2%;
	z-index: 9999;
}
.page{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	display: none;
}
.page0{
	opacity: 1;
	display: block;
	background: url("../img/all.png") no-repeat;
	background-size:cover;
}

.title-wrap_p0{
	position: absolute;
	top: 28%;
	width: 85%;
	height: 21.8%;
	width: 100%;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tit_p0{
	width: 100%;
	height: 100%;
	transform-origin: center center;
	transform: rotate(-81deg);
	transition:tit_p0 .5s ;
	animation:tit_p0  1s linear forwards;
}


/* page0 遮罩 与进度条 */
.mask {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 99999;
	background-color: rgba(30, 30, 30,.8);


}

.mask .load-out {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 80%;
	height: 15px;
	background-color: #ef5342;
	border-radius: 5px;
	text-align: center;
	line-height: 15px;
	color: #fff;
	overflow: hidden;
}

#loading {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
}

.mask .load-out .load-in{
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	border-radius: 5px;
	background-color: #fdda84;
	z-index: 9;
	transition:width .5s ease-in-out;


}

@keyframes tit_p0 {
	0%{
		transform: rotate(-81deg);
	}

	25%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}


.page0,.page1,.page2,.page3{
	position: relative;
	width: 100%;
	height: 100%;

}

.page1 .sky,.page1 .bottom-left,.page1 .main{
	position: absolute;
	left: 0;
	width:100%;
	height: 100%;
	
}

.page1 .sky{
	top: 0;
	background: url("../img/page1/sky.png") no-repeat;
	background-size: 100%;
	z-index: 9;

}

.page1 .bottom-left{
	bottom: 0;
	background: url("../img/page1/left_bottom.png") no-repeat;
	background-size: cover;
	z-index: 9;

}

.page1 .main{
	top: 0;
	background: url("../img/page1/main.png") no-repeat;
	background-size: cover;
	z-index: -9;
}


.title-wrap{
	position: absolute;
	top: 24%;
	width: 85%;
	height: 21.8%;
	width: 100%;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tit{
	width: 100%;
	height: 100%;
	transform-origin: center center;
	animation:title-ani  1s linear;
}

.page1 .btn_p1{
	display: block;
	position: absolute;
	left: 50%;
	bottom: 3.8%;
	transform: translateX(-50%);
	width: 59%;
	height: 10%;
	z-index: 99;
}

/* page2 */
.page2{
	background: url("../img/all2.png") no-repeat;
	background-size: 100%;
	z-index: -9;
}


.btn_p2{
	display: block;
	position: absolute;
	left: 50%;
	bottom: 3.8%;
	transform: translateX(-50%);
	width: 59%;
	height: 10%;
	z-index: 99999;
}

.page .p_p2{
	position: absolute;
	left: 50%;
	bottom:17%;
	width: 100%;
	height: 10px;
	transform: translateX(-50%);
	z-index: 9999;
	text-align: center;

}

.page img{
	position: absolute;
}

/* l-t */
.page2 img:nth-child(1){
	width: 139px;
    height: 137px;
	top: -1000px;
	left: -1000px;


}

.page2 img:nth-child(1).on{
    top: 213px;
    left: 19px;
	transition: 0.5s 1.8s;
}

/* l-b */
.page2 img:nth-child(2){
    width: 123px;
    height: 121px;
	left: -1000px;
	bottom: -1000px;
}

.page2 img:nth-child(2).on {
	left: 96px;
	bottom: 209px;
	transition: 0.5s 1.5s;
}
/* r-t */
.page2 img:nth-child(3){
    width: 125px;
    height: 121px;
	top: -1000px;
	right: -1000px;

}

.page2 img:nth-child(3).on {
    top: 181px;
    right: 98px;
	transition: 0.5s 0.5s;
}

/* r-c */
.page2 img:nth-child(4){
	width: 134px;
    height: 146px;
	right: -1000px;

}

.page2 img:nth-child(4).on {
    top: 275px;
    right: 24px;
	transition: 0.5s 0.8s;
}

/* r-b */
.page2 img:nth-child(5){
    width: 93px;
    height: 90px;
	bottom: -1000px;
	right: -1000px;

}

.page2 img:nth-child(5).on{
	bottom: 183px;
    right: 56px;
	transition: 0.5s 2s;
}





/* .txt1_p2{
	position: absolute;
	top: 3%;
	right: 17%;
	display: block;
	z-index: 999;
	width: 32%;
	height: 8%;
}

.left_top_p2{
	position: absolute;
	right: 26%;
	top: -1px;
	width: 80%;
	height: 20%;
	background: url("../img/page2/left_red.png") no-repeat;
	background-size: contain;
	z-index: 999;
}

.right_top_p2{
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img/page2/right_top.png") no-repeat;
	background-size: cover;
	z-index: 999;
}

.page2 .top_p2{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img/page2/top.png") no-repeat;
	background-size: cover;
	z-index: 9;
}

.page2 .bottom_p2{
	position: absolute;
	left: 0;
	bottom: -22px;
	width: 100%;
	height: 49%;
	background: url("../img/page2/bottom.png") no-repeat;
	background-size: cover;
	z-index: 99;
}

.page2 .bottom_p2 img{
	width: 15%;
	height: 15%;
	margin-left: 5%;
	margin-top: 36%;
} */


/* .page2 .left_top_p2 img{
	width: 481px;
	height: 279px;
}

.page2 .photo{
	position: absolute;
	top: 23%;
	width: 100%;
	height: 100%;
	background: url("../img/page2/photo.png") no-repeat;
	background-size: contain;
	z-index: 9999;
} */


/* page3 */
.page3{
	background: url("../img/all3.png") no-repeat;
	background-size: contain;
}

.finger_wrap_p3{
	width: 100%;
	height: 13%;
	position: absolute;
	top: 16%;
	text-align: center;
	display: flex;
	justify-content: center;
}

.finger {
	display: block;
	width: 25%;
	height: 100%;
	margin: 0 auto;

}

.textarea{
	padding: 0;
    display: inline-block;
    position: absolute;
    top: 36%;
    left: 31%;
    background-color: transparent;
    border: none;
    outline: none;
    line-height: 35px;
    overflow: hidden;

}

.txt1_p3{
	position: absolute;
    top: 6%;
    right: 6%;
    display: block;
    z-index: 999;
    width: 40%;
    height: 8%;
}


.scale-ani{
	animation:scaleTxt .5s linear 3;
}
/* 放大缩小 */
@keyframes scaleTxt { 
    0%{
        transform: scale(1);  /*开始为原始大小*/
    }
    25%{
        transform: scale(1.2); /*放大1.1倍*/
    }
    50%{
        transform: scale(1);
    }
    75%{   
        transform: scale(1.2);
    }
}


.ani{
	animation: ani 1s linear forwards;
}

.ani-route{
	animation:route-ani 3s linear infinite;
}
.ani-title{
	animation:title-ani  1s linear;
}
@keyframes ani{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@keyframes move{
	from{}
	to{}
}

@keyframes route-ani {
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(720deg);
	}
}


@keyframes title-ani {
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(720deg);
	}
}

